<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox">
					<div class="ibox-body">
                        <div class="col-sm-12" style="width: 100%">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>筛选条件</h5>
                                </div>
                                <div class="ibox-content">
                                    <div class="layui-form">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label" style="width: 100px;">搜索条件</label>
                                            <div class="layui-input-inline">
                                                <input type="hidden" id="conditionName" value=""/>
                                                <select id="conditions" lay-filter="conditionName">
                                                    <option value="" selected="">请选择查询条件</option>
                                                    <option value="username">姓名</option>
                                                    <option value="usercode" >用户名</option>
                                                    <option value="email" >邮箱</option>
                                                    <option value="locked" >状态</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline layui-hide" id="conditionDiv" >
                                                <input type="text" name="condition" oninput="searchRe(this)" id="condition"
                                                       lay-verify="title" autocomplete="off"
                                                       placeholder="请输入查询内容(模糊搜索)" class="layui-input">
                                            </div>
                                            <div class="layui-input-inline layui-hide" id="availableDiv" >
                                                <select id="available" lay-filter="availableName">
                                                    <option value="" selected="">请选择状态</option>
                                                    <option value="0">正常</option>
                                                    <option value="1" >锁定</option>
                                                </select>
                                            </div>
                                            <div class="layui-input-inline" style="float: right;">
                                                <button type="button" class="btn btn-primary btn-sm" onclick="add()">
                                                    <i class="fa fa-plus" aria-hidden="true"></i>添加
                                                </button>
                                                <button type="button" class="btn btn-danger btn-sm" onclick="batchRemove()">
                                                    <i class="fa fa-trash" aria-hidden="true"></i>批量删除
                                                </button>
                                                <a class="btn btn-info btn-sm ' + s_userComment + '" href="#" mce_href="#"
                                                   title="刷新" onclick="reLoad()"><i class="fa fa-refresh"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
						<table id="userTable" data-mobile-responsive="true">
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>
    <script>
        var currentCondition = "";
        var conditionValue = "";
    </script>
	<script type="text/javascript" th:src="@{/static/js/admin/user/user_list.js}"></script>
</body>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        form.on('select(conditionName)', function (data) {
            if (data.value == currentCondition) {
                return;
            } else {
                currentCondition = data.value;
                layui.$("#condition").val('');
                if(currentCondition=="locked"){
                    layui.$("#conditionDiv").addClass("layui-hide");
                    layui.$("#availableDiv").removeClass("layui-hide");
                } else if (currentCondition=="username" || currentCondition=="usercode"||currentCondition=="email"){
                    layui.$("#conditionDiv").removeClass("layui-hide");
                    layui.$("#availableDiv").addClass("layui-hide");
                } else {
                    layui.$("#conditionDiv").addClass("layui-hide");
                    layui.$("#availableDiv").addClass("layui-hide");
                }
                reLoad();
            }

        });
        form.on('select(availableName)', function (data) {
            if (data.value == conditionValue) {
                return;
            } else {
                conditionValue = data.value;
                reLoad();
            }
        });
    });
    function searchRe(){
        conditionValue = $("#condition").val();
        reLoad();
    }
</script>
</html>